<script lang="ts" setup>
// 控制移动端导航栏显示 默认隐藏
import { useSystemStore } from '@/stores/system'
import { RouteNameEnum } from '@/enum'
import { getUiRouter } from '@/router'
import type { RouteRecordRaw } from 'vue-router'
import { useUserStore } from '@/stores/user'

const router = useRouter()
// 系统状态
const systemStore = useSystemStore()
const userStore = useUserStore()
const routerData: RouteRecordRaw[] = getUiRouter()
</script>

<template>
  <el-container class="size-full justify-between">
    <el-container class="max-w-fit mr-8 max-sm:mr-0.5 items-center z-50">
      <el-link
        :underline="false"
        class="mr-3 size-10 !hidden max-lg:!flex border-2 use-radius-xs use-transitions-shadow-short use-hover-bg border-amber-500"
        @click="systemStore.system.isShowMobile = !systemStore.system.isShowMobile"
      >
        <template v-if="systemStore.system.isShowMobile">
          <SvgIcon name="error" svg-class="!size-6" />
        </template>
        <template v-else>
          <SvgIcon name="menu" svg-class="!size-6" />
        </template>
      </el-link>
      <a
        @click="
          () => {
            systemStore.system.isShowMobile = false
            router.push({ name: RouteNameEnum.HOME })
          }
        "
      >
        <span class="text-2xl font-bold flowing-text">UTOPIA</span>
      </a>
    </el-container>
    <el-container class="z-50 gap-6 items-center mr-auto max-lg:!hidden">
      <RouteDrop :routerData="routerData" />
    </el-container>
    <el-container class="z-50 gap-4 max-sm:gap-2 items-center justify-end">
      <el-link
        :underline="false"
        class="min-w-10 h-10 border-2 use-radius-xs use-transitions-shadow-short use-hover-bg border-amber-500"
        @click="
          () => {
            systemStore.dialog.search = true
            systemStore.system.isShowMobile = false
          }
        "
      >
        <SvgIcon name="search" svg-class="!size-6" />
      </el-link>
      <el-link
        :underline="false"
        class="min-w-10 h-10 border-2 use-radius-xs use-transitions-shadow-short use-hover-bg border-amber-500"
        @click="
          () => {
            systemStore.dialog.setting = true
            systemStore.system.isShowMobile = false
          }
        "
      >
        <SvgIcon name="setting" svg-class="!size-6" />
      </el-link>
      <el-popover>
        <template #reference>
          <el-link
            :underline="false"
            class="min-w-10 h-10 use-radius-xs use-transitions-shadow-short use-hover-bg border-amber-500"
          >
            <el-avatar :size="40" :src="userStore.user.avatar" shape="square" />
          </el-link>
        </template>
        <el-container direction="vertical">
          <a
            v-if="!userStore.user.id"
            class="p-1.5 text-center w-full use-hover-color use-transitions-colors-short"
            @click="router.push({ name: RouteNameEnum.LOGIN })"
          >
            登 录
          </a>
          <a
            v-else
            class="p-1.5 text-center w-full use-hover-color use-transitions-colors-short"
            @click="userStore.logout()"
          >
            退 出
          </a>
        </el-container>
      </el-popover>
    </el-container>
  </el-container>
  <!-- 移动端导航栏 -->
  <el-main
    :class="
      'w-full max-lg:!block bg-gray-950/70 backdrop-blur-sm h-screen flex-col !pt-20 fixed top-0 left-0 z-40 duration-500 ' +
      (systemStore.system.isShowMobile ? ' translate-x-0' : ' -translate-x-full')
    "
    @click="systemStore.system.isShowMobile = !systemStore.system.isShowMobile"
  >
    <el-container
      v-for="(item, index) in routerData"
      :key="index"
      class="w-full mb-2 text-gray-50 relative"
      direction="vertical"
    >
      <template v-if="item.children && item.children.length > 0">
        <el-container direction="vertical">
          <a
            :href="item.meta?.isFrame ? item.path : 'javascript:'"
            class="use-hover-color use-transitions-colors-short"
            @click="item.components ? router.push({ name: item.meta?.name?.toString() }) : ''"
          >
            <SvgIcon :message="item.meta?.title?.toString()" :name="item.meta?.icon?.toString()" />
          </a>
          <el-container
            class="flex flex-col pt-1.5 ml-1 border-l border-amber-500"
            direction="vertical"
          >
            <a
              v-for="(child, index) in item.children"
              :key="index"
              :href="child.meta?.isFrame ? child.path : 'javascript:'"
              class="hover:translate-x-5 duration-300 use-hover-color"
              @click="child.components ? router.push({ name: child.meta?.name?.toString() }) : ''"
            >
              <SvgIcon
                :message="child.meta?.title?.toString()"
                :name="child.meta?.icon?.toString()"
                parentClass="py-1.5 px-4"
              />
            </a>
          </el-container>
        </el-container>
      </template>
      <template v-else>
        <a
          :href="item.meta?.isFrame ? item.path : 'javascript:'"
          class="use-hover-color use-transitions-colors-short"
          @click="item.components ? router.push({ name: item.meta?.name?.toString() }) : ''"
        >
          <SvgIcon :message="item.meta?.title?.toString()" :name="item.meta?.icon?.toString()" />
        </a>
      </template>
    </el-container>
  </el-main>
</template>

<style lang="scss" scoped></style>
